.contenedor{
    display:grid;
    grid-template-areas:
    "a c"
    "b b"
    "e e"
    "d f"
    "d f"
    "g g";   
    grid-gap: 1em;
}

.item1{
    grid-area: a;
    background-color: yellow;
    border: .5px solid;
    border-color: gray;
	padding: 5px;
}

.item2{
    grid-area: b;
    background-color: pink;
    padding: 5px;
    border: .5px solid;
    border-color: gray;
}

.item3{
    grid-area: c;
    background-color: lightgray;
    border: .5px solid;
    border-color: gray;
}

.item4{
    grid-area: d;
    background-color: white;
    display: grid;
    grid-template-columns: 1;   
    grid-gap: .5em;
}

.item5{
    grid-area: e;
    width: 250px;
}

.item6{
    grid-area: f;
    background-color: lightskyblue;
    padding: 5px;
    border: .5px solid;
    border-color: gray;
}

.item7{
    grid-area: g;
    background-color: lightgreen;
    padding: 5px;
    border: .5px solid;
    border-color: gray;
}

.imgChica{
    width: 150px;
}



@media only screen and (min-width: 600px){
    .contenedor{
        display: grid;
        grid-template-areas:
            "a c"
            "b b"
            "f d"
            "f e"
            "f g";
        grid-gap: .5em;
    }
    .item1{
        grid-area: a;
    }
    .item2{
        grid-area: b;
    }
    .item3{
        grid-area: c;
    }
    .item4{
        grid-area: d;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: .5em;
    }
    .item5{
        grid-area: e;
        width: 250px;
    }
    .item6{
        grid-area: f;
    }
    .item7{
        grid-area: g;
    }
    .imgChica{
        width: 100px;
    }
   

}

@media only screen and (min-width: 768px){
    .contenedor{
        display: grid;
        grid-template-areas:
        "a b b b b c"
        "d e e e f f"
        "g g g g f f";
        grid-gap: .5em;
    }
    .item1{
        grid-area: a;
    }
    .item2{
        grid-area: b;
    }
    .item3{
        grid-area: c;
    }
    .item4{
        grid-area: d;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: .5em;
    }
    .item5{
        grid-area: e;
        width: 250px;
    }
    .item6{
        grid-area: f;
    }
    .item7{
        grid-area: g;
    }
    
    .imgChica{
        width: 100px;
    }
}